<template>
  <list-layout
    channel="solutions">
    <div class="list-top-text">
      全部方案
      <filter-options ref="filterOptions" class="filter-options"
        :hasKw="true"
        :bottomKw="true"
        :opts="filterOptions"
        :showSelected="false"
        :maxLines="3"
        @search="filter({query: $event})"></filter-options>
    </div>
    <list-item
      class="solution-list-item"
      v-for="(item,index) in data.docs" :key="index"
      :tags="[...(item.领域 || []), new Date(item.日期).toLocaleDateString()]"
      :title="item.名称"
      :content="item.详情 || item.名称"
      :contentLines="3"
      :img="item.图片 && item.图片.id"
      :url="`/solutions/${item.id}`"></list-item>

    <div
      v-if="data && data.total === 0"
      class="no-data-label">
      <div class="absolute-center">
        {{$t('暂无数据')}}
      </div>
    </div>

    <!-- 列表页面注意分页 -->
    <!-- 翻页时调用: refreshData({page: <页吗>}) -->
    <pagination v-if="data && data.total" :data="data" @changed="pageChanged"></pagination>
  </list-layout>
</template>

<script>
import mixins from 'eis-admin-mixins';
import { RefreshOnLocaleChange } from '../../components/mixins/locale';
import listLayout from '../../components/listLayout.vue';
import listItem from '../../components/listItem.vue';
import pagination from '../../components/pagination.vue';
import FilterOptions from '../../components/filterOptions.vue';

export default {
  name: 'PolicyList',
  mixins: [mixins.ObjectDataMixin, RefreshOnLocaleChange],
  components: {
    listItem,
    listLayout,
    pagination,
    FilterOptions,
  },
  data() {
    return {
      filters: {},
      filterOptions: [
        {
          label: '领域',
          field: '领域',
          multiple: false,
          options: [
            {
              label: '工业制造',
              value: '工业制造',
            },
            {
              label: '物流',
              value: '物流',
            },
            {
              label: '医疗健康',
              value: '医疗健康',
            },
            {
              label: '交通',
              value: '交通',
            },
            {
              label: '安防',
              value: '安防',
            },
            {
              label: '其他',
              value: '其他',
            },
          ],
        },
      ],
    };
  },
  methods: {
    afterRefresh() {
      this.Bus.$store.commit('portal/CLEAR_FILTERS');
    },
    pageChanged(p) {
      this.refreshData({ ...this.filters, page: p });
    },
    filter(filters) {
      const { query } = filters;

      this.filters = query || {};

      this.refreshData({ ...this.filters });
    },
  },
};
</script>

<style lang="scss" scoped>
.filter-options {
  font-size: 14px;
}
</style>

<style lang="scss">
.solution-list-item {
  height: 200px !important;
  .avatar .img{
    width: 260px !important;
    height: 160px !important;
    margin-right: 16px;

    border-radius: 0 !important;
  }

  .item-content {
    .title {
      font-size: 18px !important;
      margin-bottom: 16px !important;
    }

    .content {
      font-size: 16px !important;
      line-height: 1.8rem;
      margin-bottom: 24px;
    }
  }

  .tags {
    left: unset !important;
    right: -20px !important;
    bottom: 8px !important;
    display: flex;
    align-items: center;

    .q-chip:last-child {
      background: transparent !important;
      color: $grey-6 !important;
      font-size: 14px !important;
    }
  }
}
</style>
